<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>充币记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-form ref="form" :inline="true" label-width="80px">
        <el-form-item label="邮箱:" class="line">
          <el-input
            placeholder="请输入邮箱"
            v-model="queryInfo.userEmail"
            clearable
            @clear="getmsglist"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码" class="line">
          <el-input
            placeholder="请输入11位有效号码"
            maxlength="11"
            v-model="queryInfo.userTel"
            size="mini"
            clearable
            @clear="getmsglist"
          ></el-input>
        </el-form-item>
        <el-form-item label="充值时间">
          <el-date-picker
            v-model="queryInfo.sdate"
            type="datetime"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
          <span>-</span>
          <el-date-picker
            v-model="queryInfo.edate"
            type="datetime"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="互转类型" class="line">
          <template>
            <el-select
              v-model="queryInfo.chargeState"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click="getmsglist"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="exportExcel()"
            >导出表格</el-button
          >
        </el-form-item>
      </el-form>
      <!-- <el-row :gutter="20">
        <el-col :span="4"><h3 style="font-size: 20px;color: #409eff;">DFH:{{coinDFH}}</h3></el-col>
        <el-col :span="4"><h3 style="font-size: 20px;color: #409eff;">DFC:{{coinDFC}}</h3></el-col>
        <el-col :span="4"><h3 style="font-size: 20px;color: #409eff;">USDT:{{coinUSDT}}</h3></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5"><h3 style="font-size: 20px;color: #409eff;">今日DFH:{{nowcoinDFH}}</h3></el-col>
        <el-col :span="5"><h3 style="font-size: 20px;color: #409eff;">今日DFC:{{nowcoinDFC}}</h3></el-col>
        <el-col :span="5"><h3 style="font-size: 20px;color: #409eff;">今日USDT:{{nowcoinUSDT}}</h3></el-col>
      </el-row> -->
      <el-table id="el-table" :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="id" label="ID" width="80"> </el-table-column>
        <el-table-column prop="nick_name" label="用户名"> </el-table-column>
        <el-table-column prop="user_tel" label="手机号码"> </el-table-column>
        <el-table-column prop="user_email" label="邮箱"> </el-table-column>
        <el-table-column prop="token_s_en" label="币种">
            <!-- <template slot-scope="scope">
                <span>{{scope.row.coinType | currency}}</span>
            </template> -->
        </el-table-column>
        <el-table-column prop="number" label="充值数量"> </el-table-column>
        <el-table-column prop="create_time" label="充值时间"> </el-table-column>
        <el-table-column prop="fromhash" label="发起地址" width="200">
        </el-table-column>
        <el-table-column prop="tohash" label="目标地址" width="200">
        </el-table-column>
        <el-table-column label="状态类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.charge_state ===1">外部提取</el-tag>
            <el-tag type="success" v-else>内部提取</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
// 导入excel表格组件
import ExportJsonExcel from "js-export-excel";
export default {
  data() {
    return {
      queryInfo: {
        userEmail: "",
        userTel: "",
        sdate: "",
        edate: "",
        status: "",
        type: "1",
        pageIndex: 1,
        pageSize: 10,
        orderBy: "",
        des: "",
        chargeState: "",
      },
      total: 0,
      coinDFH:"",
      coinDFC:"",
      coinUSDT:"",
      nowcoinDFH:"",
      nowcoinDFC:"",
      nowcoinUSDT:"",
      tableData: [],
      options: [
        {
          value: 1,
          label: "外部",
        },
        {
          value: 2,
          label: "内部",
        },
        {
          value: "",
          label: "全部",
        },
      ],
    };
  },
  created(){
      this.getmsglist()
  },
  methods: {
    async getmsglist() {
      const { data: res } = await this.$http.post(
        "currencyAudit/currencyAuditFindAll",
        this.httputil(this.queryInfo)
      );
      if(res.code !==200) return this.$message.error(res.msg)
      this.tableData = res.data.b360FillingUpRecords
      this.total =res.data.count
      this.coinDFH =res.data.dfh
      this.coinDFC =res.data.dfc
      this.coinUSDT =res.data.usdt
      this.nowcoinDFH =res.data.nowdfh
      this.nowcoinDFC =res.data.nowdfc
      this.nowcoinUSDT =res.data.nowusdt
    },
    // 页面数量发生改变
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getmsglist();
    },
    // 页数发生改变
    handleCurrentChange(newCurrent) {
      this.queryInfo.pageIndex = newCurrent;
      this.getmsglist();
    },
        //导出Excel表格事件
    async exportExcel() {
      this.queryInfo.pageSize = this.total; //获取所有的数据条数
      this.queryInfo.pageIndex = 1; //页码
      const { data: res } = await this.$http.post(
        "currencyAudit/currencyAuditFindAll",
        this.httputil(this.queryInfo)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      var list = res.data.b360FillingUpRecords; //选中的数据
      for (var i = 0; i < list.length; i++) {
        // if (list[i].coinType == 1) {
        //   list[i].coinType = "FIL";
        // } else if (list[i].coinType == 2) {
        //   list[i].coinType = "FILU";
        // } else if (list[i].coinType == 3) {
        //   list[i].coinType = "USDT";
        // }
        if (list[i].charge_state == 1) {
          list[i].charge_state = "外部充值";
        }
        if (list[i].charge_state == 2) {
          list[i].charge_state = "内部互转";
        }
      }
      var option = {};
      option.fileName = "充币记录";
      option.datas = [
        {
          sheetData: list,
          sheetName: "sheet",
          sheetFilter: [
            "id",
            "nick_name",
            "user_tel",
            "user_email",
            "token_s_en",
            "number",
            "create_time",
            "fromhash",
            "tohash",
            "charge_state",
          ],
          sheetHeader: [
            "ID",
            "用户名",
            "手机号码",
            "邮箱",
            "币种",
            "充值数量",
            "充值时间",
            "发起地址",
            "目标地址",
            "状态类型",
          ],
        },
      ];
      var toExcel = new ExportJsonExcel(option);
      toExcel.saveExcel();
    },
  },
};
</script>
